<template>
  <ui-container :isCanScroll="isCanScroll" :full="true" :scrollGoTop="scrollGoTop" :scrollbar="false" @scroll="scroll">
    <view class="eleDetail" id="history" :style="{ minHeight: mH }" @click="handleCloseTips">
      <view class="header" id="eleDetailHeader">
        <view class="navBarTop">
          <global-nav-bar left-icon="back" :title="navBarTitle" @setHeight="setHeight" :fixed="false"
            backgroundColor="#2C2C2C" color="#fff" @clickLeft="handleBack"></global-nav-bar>
        </view>
        <view class="content">
          <view class="header_content">
            <view class="top">
              <view class="left">
                <image src="@/static/images/index/eleIcon.png" mode=""></image>
                <view class="title">
                  <text @click="toProject(eleMsg.buildingId)">{{
                    eleMsg.buildingName
                  }}</text>
                  <text style="margin-left: 20rpx">{{
                    eleMsg.elevatorAddress
                  }}</text>
                </view>
              </view>
            </view>
            <view class="bottom">
              <view class="msgBox">
                <view class="itemTag msgBoxItem">
                  <view>
                    <text>{{
                      eleMsg.useType == 0 ? "年审梯" : "非年审梯"
                    }}</text>
                    <text class="line"></text>
                  </view>
                  <view>
                    <text>{{ eleMsg.driveModeName || "-" }}</text>
                    <text class="line"></text>
                  </view>
                  <view>
                    <text>{{ eleMsg.brandName || "-" }}</text>
                    <!-- <text class="line"></text> -->
                  </view>
                  <!-- <view>
										<text>{{ `${getYear(eleMsg.madeDate)}年` }}</text>
									</view> -->
                </view>
              </view>
              <view class="msgBox">
                <view class="slect" @click="searchPart">
                  <text v-if="partMsg.name != '整梯'">{{
                    partMsg.routeNmae
                  }}</text>
                  <text style="color: #666" v-else>请选择零部件查看具体零部件数据</text>
                  <view style="font-size: 24rpx; color: #0091ff">
                    <text>选择</text>
                    <uni-icons type="arrowright" size="16" color="#0091FF"></uni-icons>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="tabs">
            <view v-for="(item, index) in tabList" :key="index" :class="['tabs-item', tabIdx == item.ids ? 'act' : '']"
              @click="handleClickTab(item)">
              {{ item.name }}
              <view class="line" v-if="tabIdx == item.ids"></view>
            </view>
          </view>
          <!-- header end -->
        </view>
      </view>
      <tk-screen-scroll :list="tabList" @getActIdx="getActIdx" :active="tabIdx" :height="151">
        <!-- 健康数据 -->
        <healthData :elevatorId="elevatorId" :partMsg="partMsg" :eleMsg="eleMsg" v-if="tabIdx === 0"></healthData>
        <!-- 维保历史 -->
        <historyList :elevatorId="elevatorId" v-if="tabIdx === 1" :partsId="partMsg.id" :stickyTop="stickyTop"
          @changeTab="changeTab"></historyList>
        <!-- 实时信息 -->
        <elevatorLive :elevatorId="elevatorId" v-if="tabIdx === 2"></elevatorLive>
        <!-- 基础信息 -->

        <!-- 整梯基础信息 -->
        <elevatorInfos v-if="tabIdx === 3 && partMsg.id == 0" :isElevatorId="elevatorId" />
        <!-- 部件基础信息 -->
        <basicInformation v-if="partMsg.id != 0 && tabIdx === 3" :elevatorId="elevatorId" :partId="partMsg.id" />

        <!-- 保养计划 -->
        <view v-if="tabIdx === 4">
          <mainPlanCom :elevatorId="elevatorId" />
        </view>
      </tk-screen-scroll>
    </view>
  </ui-container>
</template>

<script>
import UiContainer from '@/components/ui-container/ui-container';
import GlobalNavBar from '@/components/uni-nav-bar/global-nav-bar';
import healthData from './componentsDetail/healthData.vue';

import elevatorInfos from '../maintains/elevator-info.vue';
import basicInformation from './components/basicInformation.vue';
import mainPlanCom from './components/mainPlanCom.vue';
import historyList from './historyList.vue';
import elevatorLive from './elevatorLive.vue';
import { elevtorDetail, elevtorMantles } from '@/apis/elevator.js';
import { getDiffYear } from '@/utils/tools.js';
import { hanleToken } from '@/utils/utils.js';
import { mapState } from 'vuex';
import TkScreenScroll from '@/components/tk-screen-scroll/index';
export default {
	components: {
		elevatorLive,
		GlobalNavBar,
		UiContainer,
		healthData,
		elevatorInfos,
		basicInformation,
		mainPlanCom,
		historyList,
		TkScreenScroll,
	},
	computed: {
		...mapState('user', ['userinfo']),
		mH() {
			return `calc(100vh)`;
			// return `calc(100vh - ${this.mheight}px)`
		},
	},
	data() {
		return {
			partMsg: { id: 0, name: '整梯' }, // 默认选中整梯
      flagMsg:{},
			cardList: [
				{
					perilous: 1, // 隐患
					label: '外观/清洁',
					score: 80,
				},
				{
					perilous: 1, // 隐患
					label: '功能/调整',
					score: 60,
				},
				{
					perilous: 1, // 隐患
					label: '润滑',
					score: 100,
				},
				{
					perilous: 1, // 隐患
					label: '测量',
					score: 100,
				},
			],
			tabList: [
				{ name: '健康数据', ids: 0 },
				{ name: '维保历史', ids: 1 },
				{ name: '实时信息', ids: 2 },
				{ name: '基础信息', ids: 3 },
				{ name: '保养计划', ids: 4 },
			],
			tabIdx: 0,
			navBarTitle: '电梯详情', // 顶部导航栏 title
			mheight: 0,
			mantles: [], // 电梯责任人
			scrollTop: 0, // 滚动距离
			scrollGoTop: 0,
			elevatorId: '',
			eleMsg: {},
			title: '',
			list: [],
			dateObj: {
				startTime: '',
				endTime: '',
				value: '',
				planBeginDate: '',
				planEndDate: '',
			},
			isCanScroll: true,
			typeIndex: 1,
			mheights: 0,
			stickyTop: 0, // 子组件粘黏属性的高度
		};
	},
	created() {
		const query = uni.createSelectorQuery();
		query.select('#eleDetailHeader').boundingClientRect();
		query.exec((res) => { 
			this.stickyTop = parseInt(res[0].height) - 2.5;
		});
	},
	onLoad(e) {
		uni.getSystemInfo({
			success: (res) => {
				this.mheights = res.windowHeight - 78 - 240;
				// console.log(res,this.safeAreaBottom,666)
			},
		}); 
		this.elevatorId = e.id;
		this.tabIdx = e.type || 0;
		this.fetchEleDetail();
	},
	onReady() { },
	onShow() {
		if (uni.getStorageSync('componentSelect')) {
			this.partMsg = uni.getStorageSync('componentSelect').slect;
      this.flagMsg = uni.getStorageSync('componentSelect').flag;
		}
	},
	onUnload() {
		hanleToken('remove', 'componentSelect');
	},
	onHide() {
		hanleToken('remove', 'componentSelect');
	},
	watch: {
		partMsg(val) {
			if (val.id != 0) {
				this.tabList = [
					{ name: '健康数据', ids: 0 },
					{ name: '维保历史', ids: 1 },
					{ name: '基础信息', ids: 3 },
				];
			} else {
				this.tabList = [
					{ name: '健康数据', ids: 0 },
					{ name: '维保历史', ids: 1 },
					{ name: '实时信息', ids: 2 },
					{ name: '基础信息', ids: 3 },
					{ name: '保养计划', ids: 4 },
				];
			}
		},
	},
	methods: {
		// 切换保养维修返回顶部
		changeTab() {
			if (this.scrollTop != 0) {
				this.scrollGoTop = 1;
				this.$nextTick(() => {
					this.scrollGoTop = 0;
				});
			}
		},
		// 跳转 选择零部件
		searchPart() {
			uni.navigateTo({
				url:
          '/pageModules/projectInfo/componentsDetail/assignComponent?partMsg=' +
          JSON.stringify(this.partMsg),
			});
		},
		// 跳转 项目详情
		toProject(id) {
			uni.navigateTo({
				url: '/pageModules/projectInfo/detail?id=' + id,
			});
		},
		setHeight(n) {
			this.mheight = n; 
		},
		// 滑动切换
		getActIdx(idx) {
			this.tabIdx = idx;
		},
		scroll(e) {
			let that = this;
			// 获取元素距顶距离
			const query = uni.createSelectorQuery();
			query.select('#history').boundingClientRect();
			query.selectViewport().scrollOffset();
			query.exec(function (res) {
				if (Math.abs(res[0].top) >= that.mheight) {
					that.navBarTitle = that.eleMsg.elevatorAddress;
				} else {
					that.navBarTitle = '电梯详情';
				}
			});
			this.scrollTop = e.detail.scrollTop;
		},
		handleCloseTips() {
			uni.$emit('tooltipsClose');
		},
		// 切换tab
		handleClickTab(item) { 
			this.tabIdx = item.ids;
			if (this.scrollTop != 0) {
				this.scrollGoTop = 1;
				this.$nextTick(() => {
					this.scrollGoTop = 0;
				});
			}
		},
		// 计算年限
		getYear(d) {
			return d ? getDiffYear(d) : '-';
		},
		// 获取电梯详情 及责任人
		fetchEleDetail() {
			elevtorDetail({ elevatorId: this.elevatorId }).then((res) => {
				if (res) {
					this.eleMsg = res.data;
				}
			});
			elevtorMantles({ elevatorId: this.elevatorId }).then((res) => {
				if (res) {
					this.mantles = res.data;
				}
			});
		},
	},
};
</script>
<style>
page {
  background-color: #f6f5f8;
}
</style>
<style lang="scss" scoped>
.tabs {
  background-color: #ffffff;
  display: flex;
  border-bottom: 2rpx #eee solid;
  height: 86rpx;

  &-item {
    height: 100%;
    display: flex;
    align-items: center;
    margin: 0 20rpx;
    font-size: 26rpx;
    font-weight: 400;
    color: #93b1c7;
    transition: 0.4s all;
    position: relative;
  }

  .line {
    width: 100%;
    height: 4rpx;
    background: #0091ff;
    border-radius: 4rpx;
    transition: 0.4s all;
    position: absolute;
    bottom: 0;
    left: 0;
  }

  .act {
    font-weight: bold;
    color: #0091ff;
    border-color: #0091ff;
    font-size: 30rpx;
  }
}

.navBarTop {
  // position: sticky;
  // top: 0;
  // left: 0;
  // z-index: 999;
}

.eleDetail {
  background: #f3f6f8;
  min-height: 100vh;
  // padding-bottom: 100rpx;

  .empty {
    display: flex;
    align-items: center;
    justify-content: center;

    image {
      width: 64rpx;
      height: 64rpx;
    }

    height: 800rpx;
    flex-direction: column;
  }

  .header {
    background-color: #f3f6f8;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 10;

    .header_content {
      padding: 34rpx 20rpx 20rpx 28rpx;
      background: #fff;
      margin-bottom: 20rpx;

      .top {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .title {
          font-size: 32rpx;
          font-weight: 600;
          color: #333;
          width: 560rpx;
          // display: flex;
        }

        .left {
          display: flex;

          image {
            width: 48rpx;
            height: 48rpx;
            margin-right: 12rpx;
          }

          .tag {
            padding: 0rpx 8rpx;
            font-size: 24rpx;
            border-radius: 4rpx;
            border: 1rpx solid;
            white-space: nowrap;
          }

          .red {
            color: #e02020;
            border-color: #e02020;
          }

          .green {
            color: #16bf99;
            border-color: #16bf99;
          }
        }

        .right {
          color: #666;
          font-size: 24rpx;
          display: flex;
          position: absolute;
          right: 28rpx;
          top: 40rpx;
          width: 120rpx;
          justify-content: flex-end;
          height: 44rpx;
          // align-items: center;
          height: 80rpx;

          image {
            width: 28rpx;
            height: 28rpx;
          }
        }
      }

      .bottom {
        
        /* #ifdef H5 */
        padding-bottom: constant(safe-area-inset-bottom);  
        padding-bottom: env(safe-area-inset-bottom);  
        /* #endif */
        
        .msgBox {
          padding-left: 60rpx;
          font-size: 24rpx;
          color: #666;

          .slect {
            background: #f6f6f6;
            border-radius: 4px;
            padding: 8rpx 0;
            padding-left: 20rpx;
            padding-right: 10rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
          }

          .msgBoxItem {
            margin-bottom: 8rpx;
          }

          .itemTag {
            display: flex;

            view {
              height: 32rpx;

              display: flex;
              padding-right: 24rpx;
              position: relative;
            }

            .line {
              width: 2rpx;
              height: 22rpx;
              background-color: #ccc;
              display: flex;
              position: absolute;
              right: 10rpx;
              top: 6rpx;
            }
          }

          .more {
            display: flex;
            color: #0091ff;
            margin-bottom: 16rpx;
          }
        }

        .addressBox {
          margin-left: 60rpx;

          // height: 108rpx;
          background: #f6f6f6;
          border-radius: 8rpx;
          font-size: 24rpx;
          padding: 20rpx 0 16rpx 16rpx;
          font-size: 24rpx;
          color: #999;

          .top {
            display: flex;

            .name {
              display: flex;
              // padding-left: 14rpx;
              font-weight: 600;
              color: #333;
              align-items: center;
            }

            image {
              width: 32rpx;
              height: 32rpx;
            }
          }

          .buildAddress {
            padding: 0 20rpx 0 32rpx;
            margin-left: 10rpx;
          }
        }
      }
    }
  }
}
</style>
